<template>
    <div class="Login">
        <div class="header">
            <img src="../../../assets/logo2.png"/>
        </div>
        <div class="section">
            <div class="form">
                <div class="left">
                    <div class="input">
                        <label>用户名:</label>
                        <input type="text" v-model="username"/>
                    </div>
                    <div class="input">
                        <label>密码:</label>
                        <input type="password" v-model="password"/>
                    </div>
                    <label v-show="tip !== ''" v-text="tip"/>
                    <p>
                        <button @click="login()" >登录</button>
                        <label>忘记密码？</label>
                    </p>
                </div>
                <div class="right">
                    <img src="../../../assets/login-logo2.png">
                    <p>用户登录</p>
                </div>
            </div>
        </div>
        <bottom/>
    </div>
</template>

<script>
    export default {
        props: {},
        data() {
            return {
                username: '',
                password: '',
                tip: ''
            }
        },
        methods: {
            // 登录操作
            login() {
                if (this.tip !== '')
                    return;
                this.$axios.post('/user', {username: this.username, password: this.password})
                    .then(res => {
                        if (res.data.code === 200) {
                            // 在store中保存登录状态信息
                            this.$store.commit('setUser', res.data.content);
                            window.console.log(this.$vals);

                            // 登录成功
                            if (res.data.content.role==='teacher')
                                this.$router.push("/teacherMain");
                            else if (res.data.content.role==='admin')
                                this.$router.push("/worker")
                            else if(res.data.content.role === 'finder')
                                this.$router.push('/finder/task')
                        } else {
                            // 登录失败
                            this.tip = res.data.code === 400 ?
                                res.data.content : '网络错误!';
                        }
                    });

            }
        },
        watch: {
            username(newVal) {
                this.tip = newVal !== '' && newVal.length < 4 ? '用户名不能小于四位' : '';
            },
            password(newVal) {
                this.tip = newVal !== '' && newVal.length < 4 ? '密码不能小于四位' : '';
            }
        }
    };
</script>
<style scoped lang="scss">
    @import "Login";
</style>
